<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 头部 -->
        <el-row type="flex" justify="space-around" class="header">
          <el-col>
            <el-button type="primary" size="small" @click="addAngent">添加经纪</el-button>
          </el-col>
          <el-row type="flex" justify="end" class="searchinp">
            <el-input v-model="pageConfig.name_contains" placeholder="请输入关键字" style="width:300px" />
            <el-button size="small" icon="el-icon-search" class="search" @click="btnSearch" />
          </el-row>
        </el-row>
        <!-- 表格 -->
        <el-table :data="AngentList" border style="width: 100%" class="tableclass">
          <el-table-column prop="image" label="图片" width="180">
            <template #default="{row}">
              <img :src="row.image" alt="" style="width:160px;height:100px">
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" width="180" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="phone" label="电话" />
          <el-table-column prop="address" label="地址" />
          <el-table-column prop="desc" label="介绍" />
          <el-table-column label="操作">
            <template #default="{row}">
              <el-button type="primary" size="small" @click="editAngent(row.id)">编辑</el-button>
              <el-button type="danger" size="small" @click="delAngent(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="heigth:60px" class="pageborder">
          <el-pagination
            layout="prev,pager,next"
            :total="total"
            :page-size="pageConfig._limit"
            :current-page="currentPage"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>

      <!-- 弹窗组件 -->
      <addDialog ref="edit" :is-show-dialog.sync="isShowDialog" @addAngent="getAngentList" />
    </div>
  </div>
</template>

<script>
import addDialog from './components/add-dialog.vue'
import { delAngent, getAngentList, getAngentCount } from '@/api/angent'
export default {
  components: { addDialog },
  data() {
    return {
      isShowDialog: false,
      AngentList: [], // 经纪管理页面数据列表
      pageConfig: {
        _limit: 3, // 条数
        _start: 0, // 开始获取的位置
        name_contains: ''// 模糊搜索标题
      },
      currentPage: 1, // 当前页码
      total: 0
    }
  },
  created() {
    this.getAngentList()
    this.getAngetCount()
  },
  methods: {
    // 封装一个接口,获取经济管理页面的数据渲染
    async getAngentList() {
      const { data } = await getAngentList(this.pageConfig)
      console.log(80, data)
      this.AngentList = data
    },
    // 显示页码
    async getAngetCount() {
      const { data } = await getAngentCount(this.pageConfig)
      // const res = await getAngentCount(this.pageConfig)
      // console.log(88, res)
      this.total = data
    },
    // 翻页
    currentChange(newPage) {
      // 切换页码，求它的初始值
      this.pageConfig._start = this.pageConfig._limit * (newPage - 1)
      // this.currentPage = newPage
      this.getAngentList()
      this.getAngetCount()
    },
    // 添加经纪功能
    addAngent() {
      this.isShowDialog = true
    },
    // 删除功能
    async delAngent(id) {
      try {
        // 二次确认
        await this.$confirm('是否确认删除?')
        // 发请求
        await delAngent(id)
        // 提示用户
        this.$message.success('删除成功')
        // 删除最后一条数据的时候,返回到第一页
        if (this.AngentList.length === 1 && this.pageConfig._start >= 1) {
          this.pageConfig._start = 0
          this.currentPage--
        }
        // 加载数据
        this.getAngentList()
        this.getAngetCount()
      } catch (error) {
        console.log(error)
      }
    },
    // 编辑弹窗
    async editAngent(id) {
      this.userid = id
      // console.log(100, this.userid)
      this.isShowDialog = true
      await this.$refs.edit.getAngentDetail(id)
    },
    // 搜索/筛选
    async btnSearch() {
      this.pageConfig._start = 0
      this.currentPage--
      const { data } = await getAngentList(this.pageConfig)
      this.AngentList = data
      this.getAngetCount(this.pageConfig.name_contains)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  .header{
    margin-bottom: 25px;
    border-bottom: 1px solid #dcdfe6;
    .searchinp{
       margin-bottom: 20px;
        .search{
          border-color: #ccc;
        }
    }
  }
  .pageborder{
    height: 60px;
    margin-top: 30px;
    border-top: 2px solid #dcdfe6;
  }
  .operation{
    margin-top: 20px;
  }
}
</style>

